{%- liquid
  case section.settings.background_color
    when 'white'
      assign color_style = 'light'
    when 'black'
      assign color_style = 'dark'
    else 
      assign color_style = 'default'
  endcase

  case section.settings.mobile_content_aligenment
    when 'center'
      assign text_aligenment = 'text-center text-lg-start'
      assign content_aligenment = 'justify-content-center justify-content-lg-between'
    when 'left'
      assign text_aligenment = 'text-start'
      assign content_aligenment = 'justify-content-start justify-content-lg-between'
  endcase
-%}

<div class="site-footer-v3 {{ color_style }}">
  <div class="container">
    {% if section.settings.logo_image != blank %}
      <div class="py-4 py-lg-6 {{ text_aligenment }}{% if section.settings.desktop_logo_position == 'center' %} text-lg-center{% else %} text-lg-start{% endif %}">
        <div class="d-inline-block" style="max-width: 250px; width: {{ section.settings.custom_logo_width }}px;">
          <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.logo_image.aspect_ratio | times: 100 }}%;">
          <picture>
            <img class="w-100 h-auto" width="{{section.settings.logo_image.width}}" height="{{ section.settings.logo_image.height }}" loading="lazy" src="{{ section.settings.logo_image | img_url: 'master' }}" alt="{{ section.settings.logo_image.alt | escape }}" />	
          </picture>
          </div>
        </div>
      </div>
    <hr class="my-0">
    {% endif %}

    <div class="d-flex flex-lg-nowrap flex-wrap py-4 {{ content_aligenment }} {{ text_aligenment }}">
      <div class="flex-shrink-0">
        {% if  section.settings.copyright %}
          <div class="small text-footer">{{ section.settings.copyright }}</div>
        {% endif %}
      </div>
      <div class="px-lg-6 flex-grow-1 col-12 col-lg">
        {% if section.settings.footer_menu != blank %}
          {% assign mainMenu = linklists[section.settings.footer_menu].links %}
          {% if mainMenu.size > 0 %}
            <ul class="list-unstyled mb-0 row justify-content-lg-center small mt-5 mt-lg-0 ">
              {% for menu in mainMenu %}
                <li class="col-12 col-lg-auto mb-lg-0{% if forloop.last == false %} mb-3{% endif %}"><a {% if menu.url contains 'https://' %}
                  target="_blank" rel="nofollow" {% endif %} class="fw-normal text-decoration-none link-footer {{ color_style }}" href="{{ menu.url }}">{{ menu.title }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
        {% endif %}
      </div>
      <div class="flex-shrink-0">
        {% if section.settings.show_social_media_icons %}
          {%- liquid
            assign social_media_string = 'twitter,facebook,instagram,pinterest,snapchat,youtube,vimeo,tumblr,tiktok'
            assign social_media = social_media_string | split: ','
            assign show_media = false
            for media in social_media
              assign social_link = media | append: '_link' | prepend: 'social_'
              if settings[social_link] != blank
                assign show_media = true
                break
              endif
            endfor
          -%}
          {% if show_media %}
            <div class="mt-5 mt-lg-0 ">
              <div class="row g-3 justify-content-lg-end">
                {% for media in social_media %}
                  {% assign social_link=media | append: '_link' | prepend: 'social_' %}
                  {% if settings[social_link] != blank %}
                    <div class="col-auto">
                      <a {% render 'link', link: settings[social_link] %} class="link-footer {{ color_style }} text-decoration-none icon-wrap-md" href="{{ settings[social_link] }}">
                        {% render 'icon-social-media', media: media %}
                      </a>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endif %}

      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Footer",
    "tag": "section",
    "class": "site-footer-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo_image",
        "label": "Logo image"
      },
      {
        "type": "range",
        "id": "custom_logo_width",
        "min": 50,
        "max": 250,
        "step": 10,
        "default": 70,
        "unit": "px",
        "label": "Custom logo width"
      },
      {
        "type": "select",
        "id": "desktop_logo_position",
        "label": "Desktop logo position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "mobile_content_aligenment",
        "label": "Mobile content alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "link_list",
        "id": "footer_menu",
        "label": "Footer menu",
        "default": "footer"
      },
      {
        "type": "select",
        "id": "background_color",
        "label": "Background color ",
        "options": [
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "white",
            "label": "White"
          }
        ],
        "default": "white"
      },
      {
        "type": "text",
        "id": "copyright",
        "label": "Copyright",
        "default": "Fastlane Sections Powered by Fastlane"
      },
      {
        "type":"header",
        "content":"SOCIAL MEDIA ICONS"
      },
      {
        "type": "checkbox",
        "id": "show_social_media_icons",
        "label": "Show social media icons",
        "default": true
      }
    ]
  }
{% endschema %}